import computedBehavior from 'miniprogram-computed';
Component({
  behaviors: [computedBehavior],

  properties: {
    prize: {
      type: Array,
      value: [],
    }
  },

  data: {
    wOuter: 320,
    wInner: 290,
    ratio: 1.06,
    dotSum: 9,
    dotList: [],
    colorStart: '#FFDF2F',
    colorEnd: '#FE4D32',
    colorDefault: '#F5F0FC',
    colorSelect: '#ffe400',
    curPrize: 0,
    isRuning: false,
  },

  computed: {
    dotSize(data) {
      const { wOuter, wInner } = data;
      return Math.floor((wOuter - wInner) * 0.3);
    },

    outerStyle(data) {
      const { wOuter, ratio, dotSize } = data;
      return `width: ${wOuter}px;height: ${wOuter * ratio}px;border-radius: ${dotSize}px;`;
    },

    innerStyle(data) {
      const { wInner, ratio, dotSize } = data;
      return `width: ${wInner}px;height: ${wInner * ratio}px;border-radius: ${dotSize}px;`;
    },

    dotStyle(data) {
      const { dotSize } = data;
      return `width: ${dotSize}px;height: ${dotSize}px;`;
    }
  },

  lifetimes: {
    attached() {
      this.initDotPosition();
      this.startAnimation();
    }
  },

  pageLifetimes: {
    show() {
      
    }
  },

  methods: {
    initDotPosition() {
      const { wOuter, dotSize, dotSum, ratio } = this.data;
      const span = dotSize;
      const lRow = (wOuter - dotSum * dotSize - span) / (dotSum - 1);
      const lCol = (wOuter * ratio - dotSum * dotSize - span) / (dotSum - 1);
      const data = [];
      let len = dotSum * 4 - 4;
      for (; len > 0; len--) {
        if (len < dotSum) {
          // console.log(len, len - 1, 1);
          data.push(`top: ${span / 2}px;left: ${span / 2 + (len - 1) * (dotSize + lRow)}px;`);
        } else if (dotSum <= len && len < (dotSum * 2 - 1)) {
          // console.log(len, len - dotSum, 2);
          data.push(`right: ${span / 2}px;top: ${span / 2 + (len - dotSum) * (dotSize + lCol)}px;`);
        } else if ((dotSum * 2 - 1) <= len && len < (dotSum * 3 - 2)) {
          data.push(`bottom: ${span / 2}px;right: ${span / 2 + (len - (dotSum * 2 - 1)) * (dotSize + lRow)}px;`);
          // console.log(len, len - (dotSum * 2 - 1), 3);
        } else {
          data.push(`left: ${span / 2}px;bottom: ${span / 2 + (len - (dotSum * 3 - 2)) * (dotSize + lCol)}px;`);
          // console.log(len, len - (dotSum * 3 - 2), 4);
        }
      }
      this.setData({
        dotList: data
      });
    },

    startAnimation() {
      setInterval(() => {
        const { colorStart } = this.data;
        this.setData({
          colorStart: colorStart === '#FFDF2F'? '#FE4D32' : '#FFDF2F',
          colorEnd: colorStart !== '#FFDF2F'? '#FE4D32' : '#FFDF2F',
        });
      }, 500);
    },

    startGame() {
      const { isRuning } = this.data;
      if (isRuning) {
        return false;
      }
      this.setData({
        isRuning: true
      });
      const prize = [0, 1, 2, 4, 7, 6, 5, 3];
      let count = 0
      const timer = setInterval(() => {
        count++;
        const curPrize = prize[count % prize.length];
        this.setData({
          curPrize
        });
        if (count > 30) {
          clearInterval(timer)
          this.triggerEvent('end', curPrize);
          console.log(curPrize, 'curPrize');
        }
      }, (200 + count));
    }
  }
})
